<template>
  <div class="reproductive-info">
    <!-- 标题 -->
    <div class="header">
      <div class="title-bar"></div>
      <span class="title-text">生殖资料</span>
    </div>

    <!-- 横线装饰 -->
    <div class="divider">
      <div class="divider-highlight"></div>
    </div>

    <!-- 主体表格 -->
    <div class="table-wrapper">
      <!-- 仅新增 .table-inner，实现白色背景，零布局干扰 -->
      <div class="inner table-inner">
        <el-table
          :data="menstrualReproductiveInfo"
          :border="false"
          class="question-answer-table"
          style="width: 100%"
        >
          <el-table-column
            label="最近一次看妇科时间及结果？"
            prop="lastAndrologyVisitDate"
          ></el-table-column>
          <el-table-column
            label="最后一次宫颈抹片的时间及结果？"
            prop="papSmearDate"
          ></el-table-column>
          <el-table-column
            label="是否曾经怀孕过，如果有，几次？"
            prop="previousPregnancies"
          ></el-table-column>
          <el-table-column
            label="目前如何避孕？"
            prop="contraceptionMethod"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
/* 以下脚本区域 100% 保持原样 */
import { useUserStore } from "@/store/modules/user";
import { defineProps, onMounted, ref } from "vue";
import { productivehistory } from "@/api/business/egg";

const userStore = useUserStore();
const userId = ref();
const menstrualReproductiveInfo = ref([]);

const userList = ref([]);
const loading = ref(true);

function getList() {
  loading.value = true;
  productivehistory({ userId: userId.value }).then((res) => {
    loading.value = false;
    menstrualReproductiveInfo.value = res.data;
  });
}

const props = defineProps({
  userId: { type: String, required: true, default: "" },
});

onMounted(() => {
  userId.value = props.userId;
  getList();
});
</script>

<style scoped lang="scss">
/* ====== 以下样式区域 仅追加 .table-inner，其余 100% 保持原样 ====== */
$font-default: "Microsoft YaHei", "微软雅黑", sans-serif;
$color-default: #333;

.reproductive-info {
  width: 100%;
  font-family: $font-default;
  color: $color-default;
}

.header {
  margin-top: 20px;
  display: flex;
  align-items: center;
  font-family: $font-default;
  color: $color-default;
  .title-bar {
    width: 6px;
    height: 26px;
    background-color: #2b5cab;
  }
  .title-text {
    margin-left: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #2b5cab;
    font-family: $font-default;
  }
}

.divider {
  height: 1px;
  background-color: #2b5cab;
  margin-top: 18px;
  position: relative;
  font-family: $font-default;
  color: $color-default;
  .divider-highlight {
    width: 460px;
    height: 5px;
    background: linear-gradient(to right, #2b5cab, #cedbf0);
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
  }
}

.table-wrapper {
  border: 1px solid #a2c4e8;
  border-radius: 8px;
  margin-top: 23px;
  font-family: $font-default;
  color: $color-default;
  .inner {
    padding: 10px 10px;
    font-family: $font-default;
    color: $color-default;
  }
}

/* ====== 唯一新增：白色背景，零布局干扰 ====== */
.table-inner {
  background-color: #ffffff; /* 纯白背景 */
  border-radius: 8px; /* 与外层圆角保持一致 */
  /* 无额外 padding / margin，不改变任何占位 */
}

.text {
  font-size: 14px;
  font-family: $font-default;
  color: $color-default;
}
.item {
  margin-bottom: 18px;
  font-family: $font-default;
  color: $color-default;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: $font-default;
  color: $color-default;
}
</style>
